<template>
  <view class="content">
    <v-tabs
      v-model="current"
      :scroll="false"
      :tabs="tabs"
      pills="true"
      line-height="0"
      activeColor="#fff"
      @change="changeTab"
    />
    <view class="showTab">
      <view class="item-img">
        <image :src="questionList[currentItem].url" mode=""></image>
      </view>

      <mrpzx-checker-box
        must
        :type="type"
        ref="questionChecker"
        v-model="questionList[currentItem].value"
      >
        <view class="title">{{ questionList[currentItem].question }}</view>
        <mrpzx-checker-item
          @checkItem="contentClick"
          :checked="false"
          :value="vo.id"
          :index="index"
          v-for="(vo, index) in questionList[currentItem].answers"
          :key="index"
        >
          <view class="answer">{{ vo.title }}</view>
          <view class="line"></view>
        </mrpzx-checker-item>
        <view class="confirm">
          <button @click="confirm" type="primary">确认提交</button>
        </view>
        <view class="parsing" v-if="show">
          <template v-if="flag">
            <span class="ans-true"
              >回答正确: {{ questionList[currentItem].explains }}</span
            >
          </template>
          <template v-else>
            <span class="ans-false"
              >回答错误: {{ questionList[currentItem].explains }}</span
            >
          </template>
        </view>
        <view class="toggle-btn">
          <button @click="last" type="primary">上一题</button>
          <button @click="next" type="primary">下一题</button>
        </view>
      </mrpzx-checker-box>
    </view>
    <hans-tabber
      :list="list"
      style="position: fixed; bottom: 0; width: 100%; left: 0; right: 0"
      @tabChange="tabChange"
    />
    <yu-toast
      :message="message"
      :duration="1000"
      verticalAlign="center"
      ref="toast"
    ></yu-toast>
  </view>
</template>

<script>
import { checkAnwser } from "../../utils/checkAnswer.js";
import yuToast from "../../components/yu-toast/yu-toast.vue";
import hansTabber from "../../components/hans-tabbar/hans-tabbar.vue";
export default {
  data() {
    return {
      message: "",
      flag: false, //正确和错误答案显示状态
      show: false, //答案显示状态
      current: 0, //当前显示题目类型索引
      currentItem: 0, //当前显示的题目  25  54 1
      tabs: ["c1", "c2", "a1", "a2", "b1", "b2"], //驾照类型
      question: {
        value: 0,
      }, //当前问题
      questionList: [], //当前类型问题列表
      answerList: [], //答案数组
      key: "79c7ac5137072c6178d15ef8617ef2e8", //请求key
      list: [
        {
          text: "科目一",
          iconPath: "../../static/subject.png",
          selectedIconPath: "../../static/subject_active.png",
          subject: 1,
        },
        {
          text: "科目四",
          iconPath: "../../static/subject.png",
          selectedIconPath: "../../static/subject_active.png",
          subject: 4,
        },
      ],
    };
  },
  computed: {
    type() {
      //类型监听 如果答案是4以上的数字即表明是多选题
      return this.questionList[this.currentItem].answer > 4
        ? "checked"
        : "radio";
    },
  },
  components: {
    yuToast,
    hansTabber,
  },
  onLoad() {},
  mounted() {
    this.getQuestion();
    // this.questionList = JSON.parse(uni.getStorageSync("qustionList"));
  },
  methods: {
    changeTab(index) {
      const model = this.tabs[index]; //获取驾照类型
      this.getQuestion(model); //根据驾照类型来请求新的题库
    },
    tabChange(index) {
      console.log(index); 
			const subject = this.list[index].subject //获取科目类型
      this.getQuestion(subject); //根据科目类型来请求新的题库
    },
    next() {
      //下一题
      if (this.currentItem === this.questionList.length - 1) { //如果当前题目得索引已经是数组最大长度减一了就说明到底了
        this.message = "已经是最后一题了";
        this.$refs.toast.show(); //提示最后一题了
      } else { //如果不是最后一题
        this.answerList = [];//把答案清空
        this.flag = false; //解析关闭
        this.show = false;
        this.currentItem++;//题目类型索引加一
        this.question.value = 0;//选中清楚
      }
    },
    last() {
      //上一题
      if (this.currentItem === 0) { //如果索引已经是0了
        this.message = "已经是第一题了";
        this.$refs.toast.show();//提示已经到第一题了
      } else {
        this.answerList = [];
        this.flag = false;
        this.show = false;
        this.currentItem--;
        this.question.value = 0;
      }
    },
    confirm() {
      //提交答案
      const myAns = this.answerList; //获取我选择的答案
      const leng = this.questionList[this.currentItem].answers.length;//获取该题的答案个数
      const trueAns = this.questionList[this.currentItem].answer; //获取该题的正确答案
      // console.log(this.answerList);
      const res = checkAnwser(myAns, trueAns, leng); //校验答案
      // console.log(res);
      this.show = true; //打开解析面板
      if (res === "正确") { //如果回答正确
        // console.log("回答正确");
        this.answerList = []; //清空答案数组
        this.flag = true;//打开解析面板
        this.question.value = 0; //选项清空
      } else {
        this.answerList = [];
        this.question.value = 0; 

        this.flag = false;
      }
    },
    getQuestion(model = "c1", subject = 1) {
      //获取题库
      uni.request({
        url: "http://v.juhe.cn/jztk/query",
        data: {
          subject,
          model,
          key: this.key,
        },
        success: (res) => {
          res.data.result = res.data.result.map((item) => {
            let arr = []; //保存答案数组
            let index = 0; //记录每个答案的id
            for (let k in item) {
              //遍历对象
              if (k.includes("item")) {
                //如果对象里面包含了item即说明它是一个答案
                if (item[k]) {
                  let o = {}; //创建对象
                  o.title = item[k]; //创建title
                  o.id = ++index; //创建id
                  arr.push(o); //放进答案数组方便渲染
                }
              }
            }
            item.value = 0; //设置初始选中答案为0即为不选中状态
            if (arr.length === 2 || arr.length === 0) {
              //如果数组长度为2或者是数组长度为零则表示这是一个判断题
              arr = [];
              arr.push({ id: 1, title: "正确" }, { id: 2, title: "错误" });
            }
            item.answers = arr; //设置答案数组
            return item;
          });
          this.questionList = res.data.result;
        },
      });
    },
    contentClick(isCheck, index, value) {
      // console.log(this.type);
      if (this.type === "checked") { //如果是多选题
        //如果是多选题
        if (isCheck) { //如果选中了就放进答案数组
          //检测是否选中
          this.answerList.push(value);
        } else {
          this.answerList.remove(value); //未选中就移除处答案数组
        }
      } else {
        // console.log(1);
        this.answerList = [value]; //单选题直接进行数组赋值
      }
    },
  },
};
</script>

<style scoped>
.item-img {
  width: 100%;
  height: 300rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item-img image {
  width: 60%;
  height: 80%;
}

.checker-box .title {
  padding: 20rpx 0 40rpx;
  font-size: 32rpx;
  font-weight: 700;
  color: #33353f;
  margin: 0 38rpx;
  max-height: 30rpx;
  line-height: 44rpx;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.checker-box .checker-item .answer {
  display: inline-block;
  padding: 30rpx 0;
  font-size: 32rpx;
  line-height: 44rpx;
  width: 92%;
}

.checker-box .item-selected .checker-item-tag .answer {
  color: #2e5bff;
  font-weight: 700;
}

.confirm {
  width: 400rpx;
  margin: 20rpx auto;
}
.confirm button {
  background-color: #007aff !important;
}
.ans-true {
  color: rgb(26, 160, 26);
}
.parsing {
  padding: 0 30rpx;
}
.ans-false {
  color: red;
}

.toggle-btn {
  display: flex;
  justify-content: space-around;
}
</style>
